<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width">
    <title>个人页面</title>
    <link rel="stylesheet" href="./static/element-plus/index.css"/>
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel__item img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>个人主页</h2>
        <el-container>
            <el-header>
                <el-row>
                    <el-col span="4" style="display: flex;flex-direction: row;align-items: center">
                        <img src="./images/logo.png" style="height: 60px ;width: 60px" />
                        <h2>技术社区</h2>
                    </el-col>

                    <el-col :span="8">
                        <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                            <a href="index.html"><el-menu-item index="1">首页</el-menu-item></a>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <a href="shop.html"><el-menu-item index="4">商城</el-menu-item></a>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden">
                        <el-input placeholder="请输入内容">
                    </el-col>
                </el-row>
            </el-header>
        
            <el-container>
                <el-aside>
                    <el-card>
                        <el-menu default-active="activeIndex">
                            <el-menu-item index="1">主页</el-menu-item>
                            <el-menu-item index="2">123</el-menu-item>
                            <el-menu-item index="3">123</el-menu-item>
                            <el-menu-item index="4">123</el-menu-item>
                            <el-menu-item index="5">123</el-menu-item>
                        </el-menu>
                    </el-card>
                </el-aside>

                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="4">
                                <img style="height: 100px; width: 100px;" />
                            </el-col>
                            <el-col :span="20">
                                <h2>{{user.username}}</h2>
                                <span>性别:{{user.gender}}</span><br>
                                <span>签名档：{{user.self}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"/>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的文章">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"/>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的课程">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"/>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的数据">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"/>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>
        
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./images/logo.png" style="height: 60px; width: 60px" />
                            <h2>技术社区</h2>
                            <p>致力于打造一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>

                    <el-col :xs="24" :lg="8">
                        <div style="display: flex; flex-direction: column; align-items: flex-start;">
                            <div style="display: flex; gap: 10px;">
                                <a href="index.html"><el-link>首页</el-link></a>
                                <el-link>资讯</el-link>
                                <el-link>课程</el-link>
                                <a href="shop.html"><el-link>商城</el-link></a>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <el-link>关于我们</el-link>
                                <el-link>使用手册</el-link>
                                <el-link>隐私条款</el-link>
                                <el-link>建议反馈</el-link>
                            </div>
                        </div>
                    </el-col>
                    
                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：18072521971</p>
                            <p>邮箱：wudidewu@qq.com</p>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>

<script>
    var App={
        data(){
            return{
                user:{
                    username:'awda',
                    gender:'man',
                    major:'香炉',
                    self:'来',
                },
                myArticleList:[],
            };
        },
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
</script>